/**
 * 学习目标：受控组件 - 双向绑定，类似vue中的v-mmodel
 * 本质： 把 表单元素和 state 的值关联起来
 * 1. 通过 value/checked 把 state 的值传递到 表单元素
 * 2. onChange 方法，把表单改变后的内容 setState 到 状态中即可
 * 注意点：
 * react 把 所有的 表单内容 都封装到了 onChange 事件
 * 对应不同的 表单，传过去的内容要注意 value/checked
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    value: 'hello react',
  };

  handleChange = (e) => {
    // console.log('e -----> ', e.target.value);
    this.setState({ value: e.target.value });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          /* 原生中onchange对应的是内容改变并且失焦触发 */
          // react封装好了，所有表单事件都用 onChange 即可
          onChange={this.handleChange}
          /* ❌输入事件对应的应该是 onInput */
          // onInput={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
